{% extends 'visites/include/base.html' %}
{% load staticfiles %}
<!--Page-->
    <!--Reight Content-->
{% block content %}
        <!--Right Content-->
        <div class="page-content-wrapper">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 col-xl-4">
                                <div class="mini-stat clearfix bg-white">
                                    <span class="mini-stat-icon"><i class="iconfont icon-zongdingdanliangai"></i></span>
                                    <div class="mini-stat-info text-right text-light">
                                        <span id="id" class="counter text-white">{{ order_num }}</span> 订单量
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-4">
                                <div class="mini-stat clearfix bg-success">
                                    <span class="mini-stat-icon"><i class="iconfont icon-yonghufangwenliang"></i></span>
                                    <div class="mini-stat-info text-right text-light">
                                        <span class="counter text-white">{{ user_num }}</span> 用户量
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-4">
                                <div class="mini-stat clearfix bg-info">
                                    <span class="mini-stat-icon"><i class="iconfont icon-leijixiaoshoue"></i></span>
                                    <div class="mini-stat-info text-right text-light">
                                        <span class="counter text-white">{{ sale_num }}</span> 销售额
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row row-index">
                            <div class="col-md-8 col-sm-12">
                                <div class="card card-sec m-b-30">
                                    <div class="card-body">
                                        <h4 class="mt-0 header-title">访问量</h4>
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th scope="col">时间</th>
                                                    <th scope="col">访问量</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th scope="row">日访问量</th>
                                                    <td>{{ day_num }}</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">周访问量</th>
                                                    <td>{{ week_num }}</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">月访问量</th>
                                                    <td>{{ month_num }}</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">年访问量</th>
                                                    <td>{{ year_num }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="card card-sec m-b-30">
                                    <div class="card-body">
                                        <h4 class="mt-0 header-title">订单量</h4>
                                        <ul class="list-inline widget-chart m-t-20 text-center">
                                            {% for k,v in address %}
                                                <li>
                                                    <h4 class=""><b>{{ v }}</b></h4>
                                                    <p class="text-muted m-b-0" title="{{ k }}">{{ k }}</p>
                                                </li>
                                            {% endfor %}
                                        </ul>

                                        <div id="morris-donut-example" style="height: 265px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <!--Right Content End-->
    <script src="{% static '/visites/plugins/echarts/echarts.common.min.js' %}"></script>
    <script type="text/javascript">
//        定单来源
        let orderChart = echarts.init(document.getElementById('morris-donut-example'));
        let app={};
        app.title = '环形图';
        let orderOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:[{% for k,v in address %}'{{ k }}',{% endfor %}]
            },
            series: [
                {
                    name:'订单来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {% for k,v in address %}
                            {value:{{ v }},name:'{{ k }}',itemStyle:{color:'{{ i }}'}},
                        {% endfor %}]
                }
            ]
        };
    orderChart.setOption(orderOption);
    </script>
    <script>
         sessionStorage.setItem("name", "{{ sessionName }}");      //存储键名为coffeeType和键值为mocha的数据到本地
    </script>
{% endblock %}